<!--
 * @Author: ZhaoZhiqi
 * @Date: 2022-08-18 10:03:37
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2022-08-18 10:13:47
 * @Description: 图标组件
 *
 * 属性
 * width    宽度(默认 36)     Number
 * height   高度(默认 36)     Number
 * mr       右边距(默认 0)    Number
 * mb       下边距(默认 0)    Number
 * unit     单位(默认 rpx)    String
 * src      icon路径(必填)    String
 *
 * @FilePath: \tuanfeng-mini\src\components\Icon.vue
-->

<template>
    <div class="icon" :style="{
      width: width + unit,
      height: height + unit,
      marginRight: mr + unit,
      marginBottom: mb + unit,
      backgroundImage: `url(${src})`,
    }"></div>
</template>

<script>
import Vue from "vue";

export default Vue.extend({
    props: {
        width: {
            type: Number,
            default: 36,
        },
        height: {
            type: Number,
            default: 36,
        },
        mr: {
            type: Number,
            default: 0,
        },
        mr: {
            type: Number,
            default: 0,
        },
        unit: {
            type: String,
            default: "rpx",
        },
        src: {
            type: String,
            require: true,
        },
    },
});
</script>

<style lang="scss" scoped>
@import "../assets/scss/common.scss";

.icon {
    @include bg_contain;
}
</style>